<template>
  <div id="box">
    <div class="lists">
      <div class="sort">排名</div>
      <div class="kfs">开发商</div>
      <div class="jh">借款/还款金额</div>
      <div class="syhk">
        <div>剩余借款</div>
        <div class="triangle">
          <img src="@/assets/img/bjBuilding/up.png" alt="" srcset="" @click="sort(0, 0)" />
          <img src="@/assets/img/bjBuilding/down.png" alt="" srcset="" @click="sort(0, 1)" />
        </div>
      </div>
      <div class="hkjd">
        <div>还款进度</div>
        <div class="triangle">
          <img src="@/assets/img/bjBuilding/up.png" alt="" srcset="" @click="sort(1, 0)" />
          <img src="@/assets/img/bjBuilding/down.png" alt="" srcset="" @click="sort(1, 1)" />
        </div>
      </div>
    </div>
    <div class="lists" v-for="(item, index) in dataList">
      <div class="sort">{{ ++index }}</div>
      <div class="kfs finger" @click="go(item.mc, item.borrow_xm_id)">
        <el-tooltip class="item" effect="dark" :content="item.mc" placement="top">
          {{ item.mc }}
          </el-tooltip>
      </div>
      <div class="jh">
        <div class="propress">
          <el-tooltip class="item" effect="dark" :content="'借款金额' + item.jkje" placement="top">
            <div class="jk" :style="{ width: item.jkjd + '%' }"></div>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" :content="'还款金额' + item.hkje" placement="top">
            <div class="hk" :style="{ width: item.deliverRatio + '%' }"></div>
          </el-tooltip>
        </div>
      </div>
      <div class="syhk">￥{{ item.syje }}</div>
      <div class="hkjd">{{ item.ratio }}%</div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, onUnmounted, reactive, getCurrentInstance, defineProps, watch, ref, defineEmits } from "vue";

const props = defineProps({
  getLendRankData: Object,
  param: Object,
});
const dataList = ref(null);
watch(
  () => props.getLendRankData,
  (val) => {
    // if(item.jkje.length)
    val.forEach((item) => {
      item.jkjd = 100 - item.ratio;
    });
    dataList.value = val;
  }
);
let { proxy } = getCurrentInstance();
var option;

// 排序

const emit = defineEmits(["dateSortStr-Father"]);

function sort(a, b) {
  const str = {
    sSort: b,
    id: a,
  };
  emit("dateSortStr-Father", str);
}

// 跳转详情
const go = (mc, borrowXmId) => {
  if (props.param.sixQueryType == 0) {
    proxy.$goDetail(mc);
  } else if (props.param.sixQueryType == 1) {
    // proxy.$goDetail(borrowXmId);
    proxy.$goProDetail(borrowXmId);
  }
};

onMounted(() => {
  option && myChart.setOption(option);
});
</script>

<style scoped lang="less">
.triangle {
  position: relative;
  top: 3px;
  left: 2px;
}
.propress {
  width: 100%;
  height: 30px;
  display: flex;
  align-items: center;
}
.propress > div {
  display: flex;
  align-items: center;
  padding-left: 5px;
  color: #fff;
  font-size: 14px;
}
.jk {
  height: 15px;
  background: linear-gradient(to right, rgba(24, 81, 188, 1), rgba(67, 128, 240, 1));
  position: relative;
}
.jk > div {
  visibility: hidden;
  width: 120px;
  background: linear-gradient(to right, rgba(24, 81, 188, 1), rgba(67, 128, 240, 1));
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 150%;
  left: 50%;
  margin-left: -60px;
}
.jk > div::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: black transparent transparent transparent;
}
.jk:hover {
  overflow: visible;
}

.hk {
  height: 15px;
  background: linear-gradient(to right, rgba(9, 167, 157, 1), rgba(18, 211, 191, 1));
}
#box {
  height: 100%;
  width: 100%;
}
.lists {
  display: flex;
  width: 100%;
  font-size: 16px;
  align-items: center;
  .sort {
    width: 10%;
    text-align: center;
  }
  .kfs {
    width: 15%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .jh {
    width: 38%;
  }
  .syhk {
    width: 20%;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    justify-content: flex-start;
    padding-left: 6px;
  }
  .hkjd {
    width: 18%;
    text-align: center;
    display: flex;
    justify-content: center;
  }
}
.lists:not(:first-child) > div {
  // text-align: center
}
.lists:not(:first-child) {
  padding: 7px 0px;
}
.lists:not(:first-child) > .kfs {
  // padding: 10px 0px;
  height: 20px;
}
.zx {
  width: 8px;
  height: 15px;
  position: relative;
  top: 3px;
  left: 3px;
  img {
    width: 100%;
    height: 100%;
  }
}
.finger {
  cursor: pointer;
}
</style>
